<template>
    <div class="container">
        <a-table
                :rowKey="record => record.id"
                :columns="columns"
                :dataSource="tableData"
                :loading="loading"
                :pagination="false"
            >
            <span slot="transformStatusNumber" slot-scope="text, record, index">
              {{record.dispatchInfo.transFormConfigs.filter(s=>s.transformStatus).length}}
            </span>
            <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
              <a-row>
                <a-col :span="12">
                      <description-list v-if="config!=undefined" title="分单配置信息" size="large">

                        <description-list-item term="分单权重">{{record.dispatchInfo.dispatchWeight}}</description-list-item>

                      </description-list>
                      <p style="color:gray;">
                          skuCode转换:
                          &nbsp;&nbsp;&nbsp;{{record.dispatchInfo.fromProductCode}}~{{record.dispatchInfo.toProductCode}}
                        </p>
                      <json-viewer :value="record.dispatchInfo"></json-viewer>
                </a-col>
                <a-col :span="12">
                      <description-list v-if="config!=undefined" title="订单处理信息" size="large">
                            <description-list-item term="接口处理">{{record.taskInfo.isSuccess?'成功':'异常'}}</description-list-item>
                            <description-list-item term="操作">
                              <a-button @click="toggleModal(record.id)" type="primary" shape="round" icon="eye" size="small">订单记录</a-button>
                            </description-list-item>
                      </description-list>
                      <p style="color:gray;">
                              返回消息 :
                              &nbsp;&nbsp;&nbsp;{{record.taskInfo.message}}
                            </p>
                      <json-viewer :value="record.taskInfo"></json-viewer>
                </a-col>
              </a-row>
            </div>
        </a-table>
      <a-pagination style="text-align:right;margin-top:10px;" @change="onPageChange"  :current="page" :pageSize="size" :total="total" />

      <a-modal width="1200px" title="分单记录" v-model="visible" @ok="handleOk">
        <!-- <template slot="footer">
              <a-button key="back" @click="handleCancel">Return</a-button>
              <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                Submit
              </a-button>
        </template> -->
        <show-order-tpl ref="showOrderTpl" />
      </a-modal>

    </div>
</template>
<script>
import { DescriptionList } from '@/components'
import JsonViewer from 'vue-json-viewer'

import { transFormService } from '@/services/index'
import ShowOrderTpl from './showTranslateOrder'

const columns = [
  {
    title: '分单名称',
    dataIndex: 'dispatchInfo.spuName'
  },
  {
    title: 'spuCode',
    dataIndex: 'dispatchInfo.spuCode'
  },
  {
    title: '分单数量',
    dataIndex: 'dispatchNumber'
  },
  {
    title: '分单skuCode配置数量',
    scopedSlots: { customRender: 'transformStatusNumber' }
  },
  {
    title: '分单时间',
    dataIndex: 'createTime'
  }
].map(s => { s.align = 'center'; s.key = s.dataIndex; return s })

const DescriptionListItem = DescriptionList.Item

export default {
  components: {
    DescriptionList,
    DescriptionListItem,
    JsonViewer,
    ShowOrderTpl
  },
  data () {
    return {
      config: {
        transformName: '',
        productSpuName: ''
      },
      loading: false,
      page: 1,
      size: 10,
      total: 0,
      columns,
      tableData: [],
      visible: false
    }
  },
  methods: {
    onPageChange (current) {
      this.loadDataWhereForm(current)
    },
    loadDataWhereForm (forwardPage) {
      const { page, size } = this
      let page_ = page
      if (forwardPage) page_ = forwardPage
      this.loading = true
      const { id } = this.$route.query
      transFormService.loadProcessLog({ configId: id, page: page_ - 1, size, ...this.form }).then(
        ({ isSuccess, data }) => {
          this.loading = false
          if (isSuccess) {
            const { content, totalElements } = data
            content.forEach(s => {
              s.dispatchInfo = JSON.parse(s.dispatchInfo)
              s.taskInfo = JSON.parse(s.taskInfo)
            })
            this.tableData = content
            this.total = totalElements
            this.page = page_
          }
        }
      )
    },
    toggleModal (id) {
      this.visible = true
      /*
      加载订单table
      */
      setTimeout(() => {
        this.$refs.showOrderTpl.loadOrderData({ id, page: 0 })
      }, 400)
    },
    handleOk () {
      this.visible = false
      // this.$refs.actionConfigForm.submit(() => {
      //   this.visible = false
      //   this.loadDataWhereForm()
      // })
    }
  },
  activated () {
    this.loadDataWhereForm()
  },
  deactivated () {
    this.visible = false
  }
}
</script>
<style lang="css" scoped>

</style>
